<template>

    <div>
        <tab title="分类"></tab>
        <van-row>
            <van-col span="6">
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="item in fl" :title="item.cat_name" />

                </van-sidebar>
            </van-col>


            <van-col span="18">
                <lbt :images="lb" width="100%" height="200px"></lbt>
              
                
                    <div v-for="item in fl[active]?.children">
                        <router-link :to="{ name: 'lb', params: { query: item.cat_name } }">
                            <van-grid :column-num="4">
                                <van-grid-item v-for="items in item.children" :icon="items.cat_icon"
                                    :text="items.cat_name" />
                            </van-grid>
                        </router-link>
                    
                    </div>

            </van-col>



        </van-row>


    </div>
</template>

<script setup>
import tab from '@/components/tab.vue';
import { categoriesApi } from '@/api/api';
import { ref } from 'vue';
let fl = ref([]);
let active = ref('')
categoriesApi().then(res => {
    console.log('分类', res);
    fl.value = res.data.message;
})

const lb = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
import lbt from '@/components/lbt.vue';


</script>

<style lang="scss" scoped></style>